<template>
  <div v-loading="loading" class="b-cont">
    <wk-head-section
      v-for="(mainItem, mainIndex) in list"
      :key="mainIndex"
      :label="mainItem.name"
      :props="{
        headBgColor: '#FAFBFC',
        arrows: 'left',
        border: false,
        bodyPadding: '0'
      }"
      class="b-cells">
      <el-form
        :ref="`editForm${mainIndex}`"
        :model="editForm"
        :validate-on-rule-change="false"
        class="el-form--flex"
        label-position="left"
        label-width="100px">
        <el-form-item
          v-for="(item, index) in mainItem.list"
          v-show="getShowValue(item)"
          :key="index"
          :prop="item.fieldName"
          :class="[
            {'is-block': isBlockShowField(item)},
            `is-${item.formType}`,
            {'is-changed': highlightChanges && item.changed}
          ]">
          <span v-if="item.formType!='field_group'" slot="label">
            {{ item.name }}
          </span>
          <div
            v-if="item.formType === 'map_address'"
            :gutter="0"
            wrap="wrap"
            class="value-box">
            <div
              :span="0.5"
              class="b-cell">
              <flexbox
                class="b-cell-b">
                <div class="b-cell-name">定位</div>
                <div
                  class="b-cell-value"
                  style="color: #2362fb;cursor: pointer;"
                  @click="checkMapView(item)">{{ item.value.location }}</div>
              </flexbox>
            </div>
            <div
              :span="0.5"
              class="b-cell">
              <flexbox
                class="b-cell-b">
                <div class="b-cell-name">区域</div>
                <div class="b-cell-value">{{ item.value.address }}</div>
              </flexbox>
            </div>
            <div
              :span="0.5"
              class="b-cell">
              <flexbox
                class="b-cell-b">
                <div class="b-cell-name">详细地址</div>
                <div class="b-cell-value">{{ item.value.detailAddress }}</div>
              </flexbox>
            </div>
          </div>

          <!-- 行程明细 -->
          <div
            v-else-if="item.formType == 'business_cause'"
            class="section">
            <el-table
              :data="item.value"
              align="center"
              header-align="center"
              stripe>
              <el-table-column
                v-for="(sItem, sIndex) in travelField"
                :key="sIndex"
                :prop="sItem.prop"
                :label="sItem.label"
                show-overflow-tooltip />
            </el-table>
          </div>

          <!-- 费用明细 -->
          <div
            v-else-if="item.formType == 'examine_cause'"
            class="section">
            <el-table
              :data="item.value"
              align="center"
              header-align="center"
              stripe>
              <el-table-column
                v-for="(sItem, sIndex) in expensesField"
                :key="sIndex"
                :prop="sItem.prop"
                :label="sItem.label"
                show-overflow-tooltip />
              <el-table-column
                label="发票"
                width="50">
                <template slot-scope="scope">
                  <flexbox justify="center">
                    <el-button
                      type="text"
                      @click.native="handleFile('preview', scope.row.img, 0)">{{ scope.row.img ? scope.row.img.length : 0 }}张</el-button>
                  </flexbox>
                </template>
              </el-table-column>
            </el-table>
          </div>

          <flexbox
            v-else
            :class="{'value-box': !['desc_text','field_group'].includes(item.formType)}"
            align="stretch"
            style="width: 100%;"
            class="form-item__value is-disabled">
            <wk-field-view
              :props="item"
              :form-type="item.formType"
              :value="item.value"
              :ignore-fields="ignoreFields"
              :class="{'is-changed': highlightChanges && item.changed}">
              <!-- eslint-disable-next-line -->
                <template slot-scope="{data}">{{ formatValue(data) }}</template>
            </wk-field-view>
          </flexbox>
        </el-form-item>
      </el-form>
    </wk-head-section>
    <slot />
    <map-view
      v-if="showMapView"
      :title="mapViewInfo.title"
      :lat="mapViewInfo.lat"
      :lng="mapViewInfo.lng"
      @hidden="showMapView=false" />
  </div>
</template>

<script>
import WkFieldView from '@/components/NewCom/WkForm/WkFieldView'
import MapView from '@/components/MapView' // 地图详情
import WkHeadSection from '@/components/NewCom/WkHeadSection'

import { isObject, isEmpty, isArray } from '@/utils/types'
import { downloadFile } from '@/utils'
import { getFormFieldShowName } from '@/components/NewCom/WkForm/utils'

export default {
  // 客户管理 的 基本信息
  name: 'OABaseInfo',
  components: {
    MapView,
    WkFieldView,
    WkHeadSection
  },
  filters: {
  },
  props: {
    // 模块ID
    id: [String, Number],
    // 固定字段的数据
    filedList: Array,
    // 忽略的字段直接输出
    ignoreFields: {
      type: Array,
      default: () => {
        return []
      }
    },
    highlightChanges: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      loading: false,
      list: [],
      // 控制展示地图详情
      showMapView: false,
      // 地图详情信息
      mapViewInfo: {},
      // 编辑
      editForm: {},

      travelField: [
        { prop: 'vehicle', label: '交通工具' },
        { prop: 'trip', label: '单程往返' },
        { prop: 'startAddress', label: '出发城市' },
        { prop: 'endAddress', label: '目的城市' },
        { prop: 'startTime', label: '开始时间' },
        { prop: 'endTime', label: '结束时间' },
        { prop: 'duration', label: '时长（天）' },
        { prop: 'description', label: '备注' }
      ],
      expensesField: [
        { prop: 'startAddress', label: '出发城市' },
        { prop: 'endAddress', label: '目的城市' },
        { prop: 'startTime', label: '开始时间' },
        { prop: 'endTime', label: '结束时间' },
        { prop: 'traffic', label: '交通费（元）' },
        { prop: 'stay', label: '住宿费（元）' },
        { prop: 'diet', label: '餐饮费（元）' },
        { prop: 'other', label: '其他费用（元）' },
        { prop: 'description', label: '费用明细描述' }
      ]
    }
  },
  watch: {
    filedList() {
      this.list = this.filedList
    }
  },
  mounted() {
    if (this.filedList) {
      this.list = this.filedList
    }
  },
  methods: {
    /**
     * 查看地图详情
     */
    checkMapView(item) {
      if (isObject(item.value) && !isEmpty(item.value.location)) {
        this.mapViewInfo = {
          title: item.value.location,
          lat: item.value.lat,
          lng: item.value.lng
        }
        this.showMapView = true
      }
    },

    /**
     * 是整行展示字段
     */
    isBlockShowField(item) {
      return [
        'map_address',
        'file',
        'field_group',
        'detail_table'].includes(item.formType)
    },

    /**
     * 判断展示
     */
    getShowValue(item) {
      if (item.hasOwnProperty('show')) {
        return item.show
      }
      return true
    },

    formatValue(item) {
      if (isEmpty(item.value)) return ''

      if (this.isModule(item)) {
        return this.getModuleName(item)
      }

      if (item.formType === 'category') {
        let value = ''
        if (isObject(item.value)) {
          value = item.value.name || ''
          if (!isEmpty(value)) return value
        }
        return this.detailData.productType || this.detailData.productTypeName || '--'
      }

      return getFormFieldShowName(item.formType, item.value, '--', item)
    },

    /**
     * 客户等模块类型
     */
    isModule(item) {
      return [
        'customer',
        'business',
        'contract',
        'contacts'
      ].includes(item.formType)
    },

    /**
     * 特殊格式数据获取展示名称
     */
    getModuleName(item) {
      // 模块数据
      const modulefield = {
        customer: 'customerName',
        business: 'businessName',
        contract: 'contractNum',
        contacts: 'name'
      }[item.formType]

      if (modulefield) {
        let data = {}
        if (isObject(item.value)) {
          data = item.value
        } else if (isArray(item.value) && item.value.length > 0) {
          data = item.value[0]
        }
        if (item.formType === 'contacts') {
          return data[modulefield] || data.contactsName || ''
        }
        return data[modulefield] || ''
      }

      // 常规对象数据
      const field = {
        category: 'categoryName'
      }[item.formType]
      return item.value ? item.value[field] : ''
    },

    /**
     * 附件查看
     */
    handleFile(type, files, index) {
      if (type === 'preview') {
        if (files && files.length > 0) {
          this.$wkPreviewFile.preview({
            index: index,
            data: files
          })
        }
      } else if (type === 'download') {
        downloadFile({ path: files.url, name: files.name })
      }
    },

    /**
     * 放大图片
     */
    imgZoom(images, k) {
      this.$wkPreviewFile.preview({
        index: k,
        data: images
      })
    },

    downloadFile(file) {
      downloadFile({ path: file.url, name: file.name })
    }
  }
}
</script>

<style lang="scss" scoped>
.b-cont {
  position: relative;
  height: 100%;
  overflow-y: auto;
  overflow-y: overlay;

  &__handle {
    position: absolute;
    right: 20px;
    z-index: 3;
    width: 100%;
    text-align: right;
  }
}

::v-deep.section {
  margin-top: 0;

  .section-header {
    padding: 0;
    margin-bottom: $--interval-base;
  }

  .content {
    overflow: hidden;
  }
}

.el-input-number {
  width: 100%;

  ::v-deep .el-input__inner {
    padding: 0 6px !important;
    text-align: left;
  }
}

.b-cells + .b-cells {
  margin-top: 24px;
}

// .b-cell {
//   padding: 0 10px;
// }

.el-form--flex {
  padding: 0;
  margin: 16px 0 0;

  ::v-deep .el-form-item {
    width: calc(50% - 8px);
    max-width: 100%;
    margin-bottom: 10px;

    .el-form-item__content {
      position: relative;
      min-height: 32px;
      line-height: 1.5;
    }

    .el-form-item__label {
      padding-top: 3px;
      line-height: 1.5;
      color: $--color-text-regular;
      text-align: right;
    }

    &.is-desc_text {
      .el-form-item__content {
        margin-left: 0 !important;
      }
    }

    &.is-field_group {
      padding-left: 12px;

      .el-form-item__content {
        margin-left: 0 !important;

        .form-item__value {
          line-height: unset;
        }
      }
    }

    &.is-changed {
      .el-form-item__content {
        .form-item__value {
          position: relative;
          padding-left: 15px;

          &::before {
            content: '*';
            color: #f56c6c;
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            font-size: 20px;
            font-weight: bold;
            line-height: 1;
            text-shadow: 0 0 1px #f56c6c;
          }

          .wk-field-view {
            color: #f56c6c;
            font-weight: bold;
          }
        }
      }
    }
  }
}

.value-box {
  min-height: 32px;
  padding: 3px 6px;
  background-color: $--input-disabled-fill;
  border: $--border-width-medium $--border-style-base $--input-disabled-border;
  border-radius: $--input-border-radius;
}

.form-item__value {
  line-height: 1.5;
  word-break: break-all;
  word-wrap: break-word;

  // min-height: 22px;
  white-space: pre-wrap;

  .wk-field-view:not(.is-common-type) {
    flex: 1;
    width: 0;
  }

  .wk-field-view.is-text {
    display: inline-block;
  }

  &:hover {
    .form-item__edit {
      display: inline;
    }
  }

  &.value-box:not(.is-disabled) {
    &:hover {
      padding-right: 22px;
    }

    .form-item__edit {
      position: absolute;
      top: 3px;
      right: 8px;
      padding-top: 0;
      padding-left: 4px;
      background-color: $--input-disabled-fill;
    }
  }
}

.form-item__edit {
  display: none;
  flex-shrink: 0;
  padding-top: 3px;
  margin-left: 5px;
  color: $--color-n80;
  cursor: pointer;

  &:hover {
    color: $--color-primary;
  }
}

.wk-edit-wrap {
  z-index: 1;
  display: block;
}

.can-check {
  color: $--color-primary !important;
  cursor: pointer;
}

.is-block {
  flex-basis: 100% !important;
}

.b-cell-b {
  width: auto;

  .b-cell-name {
    flex-shrink: 0;
    width: 100px;
    margin-right: 10px;
    color: $--color-text-secondary;
  }

  .b-cell-value {
    line-height: 30px;
    word-break: break-all;
    word-wrap: break-word;
    white-space: pre-wrap;
  }
}

::v-deep .wk-field-view.is-floatnumber {
  text-align: left !important;
}
</style>
